<template>
    <div>
        <div class="packageIsmask">
            <div class="packageBox">
                <div class="isMask_Content_Header">
                    <text class="isMask_Content_Header_Title">配送时间</text>
                    <icon content="md-close-circle" class="isMask_Content_Header_Icon" @click="cencleClick"></icon>
                </div>
                <div class="packageContent">
                    <div :class="[item.status == true ?'choose_content_item':'content_item']"
                         v-for="(item,index) in dateForm" @click="chooseClick(index)">
                        <text :class="[item.status == true ?'choose_content_item_title':'content_item_title']">{{item.title}}</text>
                        <div class="choose_icon" v-if="item.status == true">
                            <text class="iconfont icon-dagou choose_icon_title"></text>
                        </div>
                    </div>
                </div>
                <div class="isMask_Botton">
                    <div class="isMask_Botton_Box botton_Bg_Color" @click="saveClick">
                        <text class="isMask_Botton_Title botton_Fz_Color">完成</text>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dateForm: [{
                    title: '周一',
                    status: false
                },
                    {
                        title: '周二',
                        status: false
                    },
                    {
                        title: '周三',
                        status: false
                    },
                    {
                        title: '周四',
                        status: false
                    },
                    {
                        title: '周五',
                        status: false
                    },
                    {
                        title: '周六',
                        status: false
                    },
                    {
                        title: '周日',
                        status: false
                    }
                ]
            }
        },
        methods: {
            chooseClick(index) {
                this.dateForm[index].status = !this.dateForm[index].status
            },
            cencleClick() {
                this.$emit('cenclePackage')
            },
            saveClick() {
                var _this = this
                var weexData = []
                _this.dateForm.forEach(function (item) {
                    if (item.status == true) {
                        weexData.push(item)
                    }
                })
                var weexTime = ''
                weexData.forEach(function (item) {
                    weexTime += _this.filterData(item.title)
                })
                var weexForm = {
                    weexData: weexData,
                    weexTime: weexTime
                }
                this.$emit('saveClick', weexForm)
            },
            filterData(val) {
                if (val == '周一') {
                    return '1'
                } else if (val == '周二') {
                    return '2'
                } else if (val == '周三') {
                    return '3'
                } else if (val == '周四') {
                    return '4'
                } else if (val == '周五') {
                    return '5'
                } else if (val == '周六') {
                    return '6'
                } else if (val == '周日') {
                    return '7'
                }
            }
        }
    }
</script>
<style lang="css" src="../../style/wx.css"/>
<style scoped>
    .packageIsmask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 999;
    }

    .packageBox {
        width: 750px;
        height: 550px;
        background-color: white;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        position: fixed;
        bottom: 0px;
    }

    .packageHeader {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 40px;
    }

    .header_cancel {
        font-size: 28px;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        line-height: 39px;
    }

    .header_title {
        font-size: 28px;
        font-weight: 500;
        color: rgba(0, 0, 0, 1);
        line-height: 39px;
    }

    .header_confirm {
        font-size: 28px;
        font-weight: 500;
        color: rgba(33, 96, 255, 1);
        line-height: 39px;
    }

    .packageContent {
        padding-left: 40px;
        padding-right: 40px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .content_item {
        width: 210px;
        height: 72px;
        background-color: rgba(255, 255, 255, 1);
        border-style: solid;
        border-color: rgba(236, 236, 236, 1);
        border-width: 2px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        box-sizing: border-box;
    }

    .content_item_title {
        font-size: 28px;
        font-weight: 500;
        color: rgba(181, 181, 181, 1);
        line-height: 39px;
    }

    .choose_content_item {
        width: 210px;
        height: 72px;
        background-color: rgba(51, 51, 51, 1);
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden
    }

    .choose_content_item_title {
        font-size: 28px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 39px;
    }

    .choose_icon {
        width: 0;
        height: 0;
        border-top: 37px solid rgba(255, 120, 46, 1);
        border-left: 37px solid transparent;
        position: absolute;
        right: 0;
        top: 0
    }

    .choose_icon_title {
        font-size: 14px;
        color: white;
        position: absolute;
        top: -30px;
        right: 4px;
    }
    .isMask_Botton {
        width: 750px;
        /*position: absolute;*/
        /*bottom: 30px;*/
        /*left: 0;*/
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Box {
        width: 690px;
        height: 80px;
        border-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Title {
        font-size: 30px;
        /* color: white; */
    }
    .isMask_Content_Header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 30px;
        margin-top: 20px;
        padding-right: 25px;
    }

    .isMask_Content_Header_Title {
        font-size: 30px;
    }

    .isMask_Content_Header_Icon {
        position: absolute;
        top: 0px;
        right: 20px;
        width: 50px;
        height: 35px;
    }
</style>
